<!-- 个人发布 -->
<template>
	<view class="personage">

		<view class="tabs">
			<uv-tabs keyName="name" :list="tabsList" @change="tabClick" lineColor="#EC606F" :current="0"
				:activeStyle="{ color: '#0F0F0F', fontFamily: 'PingFang SC', fontWeight: 'medium', fontSize: '16px' }">
			</uv-tabs>


		</view>


		<view class="list">
			<view class="itemBox" v-for="(res,index) in pageData" :key="index">
				
				<PersonageItem :tabsList="tabsList" :data="res"></PersonageItem>
			
			</view>

			<uni-load-more v-if="pageData.length>0" :status="status"></uni-load-more>
			<noData :meStatus="true" v-else></noData>
		</view>

	</view>
</template>

<script>
	// 页面组件
	import PersonageItem from './personageItem.vue'

	// 引入vuex
	import {
		mapState,
		mapGetters,
		mapActions,
		mapMutations
	} from 'vuex'


	export default {
		props: {
			/**
			 * list数据
			 */
			data: {
				type: Array,
				default: () => []
			},

			/**
			 * 分类数据
			 */
			classifyData: {
				type: Array,
				default: () => []
			},

			/**
			 * 修改tabs
			 */
			setTabsValue: {
				type: Function,
				default: () => {}
			},

			// more状态
			status: {
				type: String,
				default: 'loading'

			},
			
			// fatherInit:{
			// 	type: Function,
			// 	default:()=>{}
			// },
			
			// /**
			//  * 修改tabBar显隐
			//  */
			// setTabBarShow:{
			// 	type: Function,
			// 	default:()=>{}
			// },
		},
		components: {
			PersonageItem
		},
		data() {
			return {
				current: 0,

				// 页面数据
				pageData: [],

				// tabs的list
				tabsList: [],
				
				unitData: [], // 找单位的数据

			};
		},
		watch: {
			data: {
				handler() {
					this.pageData = []
					let arr = [...this.data]

					if (this.data.length > 0) {
						
						arr = arr.map(res => {
							return {
							// 没有返回头像/发起人/标题/结束时间
							headImg: res.avatarUrl, // 头像
							name: res.nickName ? res.nickName : res.contact, // 发起人
							// title: '活动标题吧啦一天吧最多最多展活动标题吧啦1天吧最多最多展~', // 标题
							// endTime: '2023-06-08 17:00:00', // 结束时间
							
							id: res.id,
							artistApplicantStatus: res.artistApplicantStatus, // 艺人是否报名过了
							phone: res.phone, // 电话
							
							type: res.type, // 项目类型
							startTime: res.startTime, // 开始时间
							duration: res.duration, // 时长

							commissionAmount: res.commissionAmount, // 佣金
							address: res.address, // 地点
							quota: res.quota, // 需要人数
							applyNum: res.applicantList.length, // 申请人数量

							applyChild: [...res.applicantList], // 申请人头像

							remark: res.remark, // 备注
							
							distance: res.distance, // 距离
							
							userLevel: res.userLevel, // 会员等级
							status: res.status, // 活动状态

							data: {
								...res
							} // 其他数据
						}
						})

					}


					this.pageData = [...arr]


				},
				deep: true,
				immediate: true
			},

			classifyData: {
				handler() {
					if (this.classifyData.length > 0) {
						// 设置tabs
						this.setTabsData()
					}
				},
				deep: true,
				immediate: true
			}

		},

		created() {
			this.init()
		},



		methods: {


			/**
			 * 初始化
			 */
			init() {

			},

			/**
			 * 切换tabs
			 */
			tabClick(val) {
				this.$emit('setTabsValue', val.id)
				
			},

			/**
			 * 设置tabs数据
			 */
			setTabsData() {
				let arr = []

				arr = this.classifyData.map(res => ({
					name: res.title,
					sortNum: 1,
					...res
				}))


				arr.unshift({
					name: '全部',
					id: '',
					unit: '',
					sortNum: 1,
					cateList: []
				})

				this.tabsList = [...arr]


			},
			
			
		},



	}
</script>

<style lang="less" scoped>
	page {
	}

	.personage {
		#padding(0 0 140rpx 0);
		// background: linear-gradient(180deg, rgba(238, 212, 215, 0.8) -3%, rgba(238, 212, 215,.2) 100%);

		.itemBox {
			margin: 32rpx;
			// box-shadow: 0px 0px 8px 3px rgba(210, 211, 213, 0.5);
			
			&:first-child{
				margin-top: 0;
			}
		}

		.tabs {
			margin-bottom: 32rpx;
		}
		

	}
</style>